<template>
  <div class="person">
    <!--
      
      05 ref 创建对象类型的响应式数据 
      表明上利用ref创建响应式数据,底层还是利用reactive来包裹数据
      obj.value -> reactive(obj)
    -->
    <h2>一辆 {{ car.brand }}, 价值{{ car.price }}</h2>
    <button @click="changePrice">修改价格</button>

    <h2>游戏列表</h2>
    <ul>
      <li v-for="(item,index) in games" :key="index">
        id: {{ item.id }} <br>
        name: {{ item.name }} <br>
      </li>
    </ul>
    <button @click="changeName">修改第一个游戏的名字</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref } from 'vue'

  const car = ref({
    brand: 'bmw',
    price: 100
  })

  const games = ref([
    {
      id:'asd1',
      name: '王者荣耀1'
    },
    {
      id:'asd2',
      name: '王者荣耀2'
    },
    {
      id:'asd3',
      name: '王者荣耀3'
    },
    {
      id:'asd4',
      name: '王者荣耀4'
    }
  ])

  const changePrice = () => {
    car.value.price += 10
  }

  const changeName = () => {
    games.value[0].name = 'xxxxx'
  }

</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>